<template>
    <div class="button-container">
        <!-- 查询模块 -->
        <div class="header">
            <div class="query">
                <el-form ref="queryForm" :inline="true" :model="queryForm">
                    <!-- <el-form-item prop="name">
                        <el-input
                            placeholder="按钮名称"
                            v-model="queryForm.name"
                        ></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="query"
                            >查询</el-button
                        >
                    </el-form-item> -->
                </el-form>
            </div>
            <div class="operation">
                <el-button type="primary" @click="Add"> 新建 </el-button>
                <el-button type="success" @click="Refresh"> 刷新 </el-button>
                <el-button type="primary" @click="Edit"> 编辑 </el-button>
                <el-button type="danger" @click="Delete"> 删除 </el-button>
            </div>
        </div>
        <div class="data">
            <!-- 表格 -->
            <el-table
                ref="table"
                v-loading="loading"
                :data="list"
                border
                @row-click="handleRowClick"
                fit
                highlight-current-row
                @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" width="55" align="center">
                </el-table-column>
                <el-table-column align="center" label="序号" width="95">
                    <template slot-scope="scope">
                        {{ scope.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column label="按钮名称" prop="name"> </el-table-column
                >,
                <el-table-column label="图标">
                    <template slot-scope="scope">
                        <i
                            :class="scope.row.icon"
                            v-if="
                                scope.row.icon &&
                                scope.row.icon.indexOf('el-') !== -1
                            "
                        ></i>
                        <svg-icon
                            :icon-class="scope.row.icon"
                            v-else-if="
                                scope.row.icon &&
                                scope.row.icon.indexOf('el-') == -1
                            "
                        ></svg-icon>
                        <span v-else>无</span>
                    </template> </el-table-column
                >,
                <el-table-column label="按钮类型" prop="type"> </el-table-column
                >,
                <el-table-column label="执行函数" prop="funcName">
                </el-table-column
                >,
                <el-table-column label="排序号" prop="orderNo">
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination
                :page-size="limit"
                class="pagination"
                background
                layout="prev, pager, next"
                :total="total"
                @current-change="handlePageChange"
            >
            </el-pagination>
        </div>
        <!-- 弹窗 -->
        <el-dialog
            :title="dialogType == 'edit' ? '编辑按钮' : '新建按钮'"
            :visible.sync="dialogVisible"
            :close-on-click-modal="false"
            width="50%"
        >
            <el-form ref="form" :model="button" label-width="80px">
                <el-form-item label="按钮名称:" prop="name">
                    <el-input v-model="button.name"></el-input>
                </el-form-item>
                <el-form-item label="选择图标:" prop="icon">
                    <div v-if="button.icon" style="margin-right: 10px">
                        <svg-icon
                            v-if="button.icon.indexOf('el-') == -1"
                            :icon-class="button.icon"
                        ></svg-icon>
                        <i :class="button.icon" style="font-size: 16px"></i>
                        <el-button style="margin-left: 10px" @click="chooseIcon"
                            >更换图标</el-button
                        >
                    </div>
                    <el-button v-else @click="chooseIcon">选择图标</el-button>
                </el-form-item>
                <el-form-item label="按钮类型:" prop="type">
                    <el-radio-group v-model="button.type">
                        <el-radio-button
                            v-for="(btnType, index) of btnTypes"
                            :key="index"
                            :label="btnType"
                        ></el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="执行函数:" prop="funcName">
                    <el-radio-group v-model="button.funcName">
                        <el-radio-button
                            v-for="(funcName, index) of funcNames"
                            :key="index"
                            :label="funcName"
                        ></el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="排序号:" prop="orderNo">
                    <el-input v-model="button.orderNo"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addOrSave">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 选择图标弹窗 -->
        <el-dialog
            title="选择图标"
            :visible.sync="iconDialogVisible"
            :close-on-click-modal="false"
            width="50%"
        >
            <div style="height: 60vh; overflow: hidden auto">
                <choose-icon @change="setIcon"></choose-icon>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { pageSize } from "@/settings";
import ChooseIcon from "@/components/ChooseIcon";
import { btnTypes, funcNames } from "@/enum";
import {
    selectPage,
    addButton,
    deleteButton,
    updateButton,
} from "@/api/button";
const defaultButton = {
    name: "",
    icon: "",
    type: "primary",
    funcName: "Add",
    orderNo: 0,
};
export default {
    data() {
        return {
            button: Object.assign({}, defaultButton),
            list: [],
            dialogVisible: false,
            dialogType: "new",
            loading: false,
            start: 0,
            limit: pageSize,
            total: 0,
            selectData: [],
            queryForm: {
                name: "",
            },
            btnTypes: btnTypes,
            funcNames: funcNames,
            iconDialogVisible: false, // 图标弹窗
        };
    },
    components: {
        ChooseIcon,
    },
    methods: {
        Add() {
            this.button = Object.assign({}, defaultButton);
            this.dialogType = "new";
            this.dialogVisible = true;
        },
        Refresh() {
            this.start = 0;
            this.$refs.queryForm.resetFields();
            this.getButton();
        },
        Edit() {
            if (this.selectData.length == 0) {
                return this.$message.error("未选择任何数据");
            }
            if (this.selectData.length !== 1) {
                return this.$message.error("只能操作一条数据");
            }
            this.dialogType = "edit";
            this.button = Object.assign({}, this.selectData[0]);
            this.dialogVisible = true;
        },
        Delete() {
            if (this.selectData.length == 0) {
                return this.$message.error("未选择任何数据");
            }
            if (this.selectData.length > 1) {
                return this.$message.error("只能选择一条数据");
            }
            this.$confirm("确定要删除这条数据吗?", "删除提醒", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(async () => {
                    await deleteButton({
                        id: this.selectData[0].id,
                    });
                    this.Refresh();
                    this.$message({
                        type: "success",
                        message: "删除成功",
                    });
                })
                .catch((err) => {
                    console.error(err);
                });
        },
        chooseIcon() {
            this.iconDialogVisible = true;
        },
        async getButton() {
            this.loading = true;
            const res = await selectPage({
                start: this.start,
                limit: this.limit,
                name: this.queryForm.name,
            });
            this.loading = false;
            const { total, records } = res.data;
            this.list = records;
            this.total = total;
        },
        handleRowClick(row) {
            this.$refs.table.toggleRowSelection(row);
        },
        handleSelectionChange(selection) {
            this.selectData = selection;
        },
        handlePageChange(param) {
            this.start = (param - 1) * this.limit;
            this.getButton();
        },
        // 设置图标值，关闭弹窗
        setIcon(icon) {
            this.button.icon = icon.icon;
            this.iconDialogVisible = false;
        },
        query() {
            this.getButton();
        },
        async addOrSave() {
            let result;
            if (this.dialogType == "edit") {
                result = await updateButton(this.button);
            } else {
                result = await addButton(this.button);
            }
            const { code } = result;
            if (code == 200) {
                this.$message.success("操作成功");
                this.getButton();
            } else {
                this.$message.erro("操作失败");
            }
            this.dialogVisible = false;
        },
    },
    created() {
        this.getButton();
    },
};
</script>
<style lang="scss" scoped>
.button-container {
    padding: 15px;

    .header {
        display: flex;
        justify-content: space-between;
        .operation {
            margin-bottom: 22px;
        }
    }

    .pagination {
        margin-top: 20px;
    }

    .permission-tree {
        margin-bottom: 30px;
    }
}
</style>
